{% extends "base.html" %}
{% load i18n %}
{% block content %}

<script type="text/javascript">
jQuery(document).ready(function() {	
	gettodaymessages(1);
    getoldmessages(1);    
    
    jQuery("#pager").pager({ 
    	pagenumber: 1, 
    	pagecount: 15, 
    	buttonClickCallback: clickPage
    });
    
    function clickPage(pageclickednumber){
		jQuery("#pager").pager({ 
	    	pagenumber: pageclickednumber, 
	    	pagecount: 15, 
	    	buttonClickCallback: clickPage
	    });
		getoldmessages(pageclickednumber);
    }
    
    function gettodaymessages(pagenum) {
    	jQuery("#message_list_old").empty();
    	jQuery.ajax({
	        url: "/gettodaymessages/?pagenum="+pagenum,
	        dataType: 'json',
	        success: function(data){	        	
	        	jQuery("#message_list_today").append("<h2>Today messages</h2>");
	        	if (data != null) {		        		
	        		jQuery.each(data, function(index, message) {	        			
		        		var $message_div = $("<div id='message'></div>");
		        		$message_div.append("<img id='message_type' src='" + message.messagetype.logo + "'></img>");
		        		$message_div.append("<p>" + message.title + "</p>");
		        		$message_div.append("<p>" + message.content + "</p>");
		        		
		        		$message_footer_p = $("<p></p>");
		        		$message_footer_p.html("Received at " + message.receivetime);
		        		
		        		$message_comments_a = $("<a id='comments_" + message.id + "'>0 comment</a>");
		        		$message_comments_a.click(function() { getcomments(message.id); });
		        		
		        		$message_forward_a = $("<a id='forward_" + message.id + "'>Forward to...</a>");
		        		$message_forward_a.click(function() { forwardmessage(message.id); });
		        		
		        		$message_footer_p.append($message_comments_a);
		        		$message_footer_p.append($message_forward_a);
		        		
		        		$message_div.append($message_footer_p);
		        		
		        		jQuery("#message_list_today").append($message_div);
		        	});
	        	} else {
	        		jQuery("#message_list_today").append("<p>There is no messages received by today.</p>");
	        	}
	        	//jQuery("#message_list_today").html(message_html);
	        }
	    });
    }
    
    function getcomments(messageid) {
    	alert(messageid);
    }
    
    function forwardmessage(messageid) {
    	alert(messageid);
    }
    
    function getoldmessages(pagenum) {
    	jQuery("#message_list_old").empty();
    	jQuery.ajax({
	        url: "/getoldmessages/?pagenum="+pagenum,
	        dataType: 'json',
	        success: function(data){	        	
	        	jQuery("#message_list_old").append("<h2>Old messages</h2>");
	        	if (data != null) {		        		
	        		jQuery.each(data, function(index, message) {	        			
		        		var $message_div = $("<div id='message'></div>");
		        		$message_div.append("<img id='message_type' src='" + message.messagetype.logo + "'></img>");
		        		$message_div.append("<p>" + message.title + "</p>");
		        		$message_div.append("<p>" + message.content + "</p>");
		        		
		        		$message_footer_p = $("<p></p>");
		        		$message_footer_p.html("Received at " + message.receivetime);
		        		
		        		$message_comments_a = $("<a id='comments_" + message.id + "'>0 comment</a>");
		        		$message_comments_a.click(function() { getcomments(message.id); });
		        		
		        		$message_forward_a = $("<a id='forward_" + message.id + "'>Forward to...</a>");
		        		$message_forward_a.click(function() { forwardmessage(message.id); });
		        		
		        		$message_footer_p.append($message_comments_a);
		        		$message_footer_p.append($message_forward_a);
		        		
		        		$message_div.append($message_footer_p);
		        		
		        		jQuery("#message_list_old").append($message_div);
		        	});
	        	} else {
	        		jQuery("#message_list_old").append("<p>There is no old messages received.</p>");
	        	}
	        	//jQuery("#message_list_today").html(message_html);
	        }
	    });
    }
});
</script>

      <div id="mainContent">
        <div id="sidebar" class="span-8">
		  
		  <div id="user_info">
		    <img id="avatar" src="/static/images/avadar.jpg"></img>
			<p>{{user.name}} <span><a href="/logout">Logout</a></span></p>
			<p><a href=""><img src="/static/images/star5.gif" alt="Level {{grade.name}}" title="Level {{grade.name}}"></img></a></p>
			<p>Last login at {{user.lastlogtime}}</p>
		  </div>
		  
		  <div id="user_stat">
		    <ul>
			  <li>Today post <a href="">{{user_statistic.todaypost}}</a>, total post <a href="">{{user_statistic.totalpost}}</a></li>
			  <li>Today received <a href="">{{user_statistic.todayreceive}}</a>, total received <a href="">{{user_statistic.totalreceive}}</a></li>
			</ul>
		  </div>
		  
		  <div id="tags">
		    <h2>Tags</h2>
			{% if tag_list %}
			<ul>
			  <li><a href="" alt="cool" title="cool">cool</a></li>
			  <li><a href="" alt="magic" title="magic">magic</a></li>
			  <li><a href="" alt="box" title="box">box</a></li>
			  <li><a href="" alt="here" title="here">here</a></li>
			  <li><a href="" alt="there" title="there">there</a></li>
			</ul>
			<a href="" alt="more" title="more">More</a>
			{% else %}
			<p>No tags</p>
			{% endif %}
		  </div>
		  
		</div>
		
        <div id="content" class="span-16 last">
		  
		  <div id="message_list_today">
		    <!--
		    <h2>Today messages</h2>
		    <div id="message">
			  <img id="message_type" src="/static/images/message1.jpg"></img>
			  <p>Curabitur tellus. Phasellus tellus turpis, iaculis in, faucibus lobortis, posuere in, lorem. Donec a ante. Donec neque purus, adipiscing id, eleifend a, cursus vel, odio. Vivamus varius justo sit amet leo. Morbi sed libero.</p>
			  <p>Received at 08/03/2011 10:55:00 
			    <a id="comments" href="" alt="0 comment" title="0 comment">0 comment</a> | 
				<a id="forward" href="" alt="Forward to..." title="Forward to...">Forward to...</a>
			  </p>
			</div>
			-->
		  </div>
		  
		  <div id="message_list_old">
		    <!--
		    <h2>Old messages</h2>
		    <div id="message">
			  <img id="message_type" src="/static/images/message3.jpg"></img>
			  <p>Curabitur tellus. Phasellus tellus turpis, iaculis in, faucibus lobortis, posuere in, lorem. Donec a ante. Donec neque purus, adipiscing id, eleifend a, cursus vel, odio. Vivamus varius justo sit amet leo. Morbi sed libero.</p>
			  <p>Received at 08/03/2011 10:55:00 
			    <a id="comments" href="" alt="0 comment" title="0 comment">0 comment</a> | 
				<a id="forward" href="" alt="Forward to..." title="Forward to...">Forward to...</a>
			  </p>
			</div>
			-->
		  </div>
		  
		  <div id="pager"></div>
		  
		</div>
      </div>
{% endblock %}